<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='上传' :isSlot="false" :isNav="true"></navBar>

		<u--form labelWidth="200" labelPosition="top" :model="form" :rules="rules" ref="form">
			<u-form-item prop="title" label="文章标题" borderBottom required>
				<u--input placeholder="请输入内容" border="none" v-model="form.title"></u--input>
			</u-form-item>

			<u-form-item prop="cover" label="文章封面(必选):" borderBottom required>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1" :previewFullImage="true"></u-upload>
			</u-form-item>

			<u-form-item prop="classifyArr" label="文章分类" borderBottom required>
				<view>
					<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
					<input :value="classifyName" @click="show = true" placeholder="请选择分类" border="none"
						disabled></input>
				</view>
			</u-form-item>

			<u-form-item prop="content" label="文章内容" borderBottom required>
				<jin-edit class="editor" height="50vh" @editOk="publish" :header="{'x-token': userInfo.token}"
					uploadFileUrl="http://eggblog.bluej.cn/api/imgUpload"></jin-edit>
			</u-form-item>
		</u--form>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getClassify,
		create
	} from "@/config/api.js";
	export default {
		data() {
			return {
				form: {
					title: "",
					content: "",
					cover: "",
					classifyArr: [],
					projectId: 162
				},
				rules: {
					title: {
						required: true,
						message: "请输入文章标题",
						trigger: ['change', 'blur'],
					},
					content: {
						required: true,
						message: "请输入文章内容",
						trigger: ['change', 'blur'],
					},
					cover: {
						required: true,
						message: "请上传文章封面",
						trigger: ['change'],
					},
					classifyArr: {
						type: 'array',
						required: true,
						message: "请选择文章分类",
						trigger: ['change'],
					}
				},
				fileList: [],
				show: null,
				classifyName: '',
				columns: [],
			}
		},
		methods: {
			deletePic() {
				this.fileList.splice(0, 1)
			},

			async afterRead(e) {
				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}

				this.fileList.push(imgStatus)
				uni.uploadFile({
					url: "https://eggblog.bluej.cn/api/imgUpload",
					filePath: e.file[0].url,
					name: "file",
					header: {
						"x-token": this.userInfo.token
					},
					success: (res) => {
						const filData = JSON.parse(res.data)
						this.form.cover = filData.data[0]
						this.$set(this.fileList, 0, {
							status: 'success',
							url: filData.data[0]
						})
					}
				})
			},
			async initClassify() {
				const classify = await getClassify()
				this.classifyList = classify.data.data.rows
				const arr = this.classifyList.map(item => item.classifyName)
				this.columns.push(arr)
			},
			cancel() {
				this.show = false
			},
			confirm(data) {
				this.form.classifyArr = [this.classifyList[data.indexs[0]].id]
				this.classifyName = data.value[0]
				this.show = false
			},
			async publish(e) {
				if(e.html !='<p><br></p>'){
					this.form.content = e.html
				}
				try {
					await this.$refs.form.validate()
					const creates = await create(this.form, this.userInfo.token)
					uni.switchTab({
						url:"/pages/index/index"
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						title: e.length == 1 ? e[0].message : '请填写完毕',
						icon: 'error',
					})
				}


				// console.log(this.userInfo.token);
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.initClassify()
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 5vw;
	}

	.editor {
		width: 90vw;
	}

	::v-deep .tool {
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
	}
</style>
